<template>
    <div>
        <h2>门店添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td>
                        <input type="text" v-model="quertInfo.ShopName"> 
                    </td>
                </tr>
                <tr>
                    <td align="right"> 分店名称</td>
                    <td>
                        <input type="text" v-model="quertInfo.BranchName">
                    </td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="quertInfo.Photo" width="100" height="100" v-if="quertInfo.Photo!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td>
                        <input type="date" v-model="quertInfo.BeginTime">
                    </td>
                </tr>
                <tr>
                    <td align="right">是否启用</td>
                    <td>
                        <input type="radio" name="state" :value="0" v-model="quertInfo.State">是
                        <input type="radio" name="state" :value="1" v-model="quertInfo.State">否
                    </td>
                </tr>
                <tr>
                    <td align="right">门店特色</td>
                    <td>
                        <input type="checkbox" name="tese" value="办婚礼" v-model="quertInfo.Feature">办婚礼
                        <input type="checkbox" name="tese" value="办满月酒" v-model="quertInfo.Feature">办满月酒
                        <input type="checkbox" name="tese" value="升学宴" v-model="quertInfo.Feature">升学宴
                        <input type="checkbox" name="tese" value="团建" v-model="quertInfo.Feature">团建
                    </td>
                </tr>

                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                       <textarea cols="50" rows="5" v-model="quertInfo.Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店位置</td>
                    <td>
                        <select v-model="quertInfo.AddressId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in showaddr.list">{{ item.Name }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">酒店类型</td>
                    <td>
                        <select v-model="quertInfo.ShopType">
                            <option value="">请选择</option>
                            <option :value="1">普通酒店</option>
                            <option :value="2">三星酒店</option>
                            <option :value="3">五星酒店</option>
                            <option :value="4">电竟酒店</option>
                            <option :value="5">商务酒店</option>
                            <option :value="6">民宿酒店</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="增加" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';

const router=useRouter();
const route=useRoute();


//1.把门店读取出来 2.完成图片上传 3.增加
//1.把门店读取出来
onMounted(()=>{
    addrshow();
})

//显示门店位置
let showaddr:any=reactive({
    list:[],
})

//添加门店向后端传递的数据
let quertInfo:any=reactive({    
   
  "ShopName": "",
  "BranchName": "",
  "Photo": "",
  "BeginTime": "",
  "State":'',
  "Feature": [],
  "Desc": "",
  "AddressId": '',
  "ShopType": '',
})

const ok=()=>{
    //1.有效性
    if(quertInfo.ShopName==""){
        alert("门店名称不能为空");
        return;
    }
    //1-20个汉字
    let reg=/^[\u4e00-\u9fa5]{1,20}$/;
    if(reg.test(quertInfo.ShopName)==false){
        alert("门店名称应该为1-20个汉字");
        return;
    }
    if(quertInfo.BranchName==""){
        alert("分店名称不能为空");
        return;
    }
    if(quertInfo.Photo==""){
        alert("门店图片不能为空");
        return;
    }
    if(quertInfo.BeginTime==""){
        alert("开业时间不能为空");
        return;
    }
    //==比较的值 ===比较的类型
    if(quertInfo.State===""){
        alert("门店状态不能为空");
        return;
    }
    if(quertInfo.Feature.length==0){
        alert("门店特色必选");
        return;
    }
    
    if(quertInfo.Desc.length>20 || quertInfo.Desc==""){
        alert("门店介绍必须小于20个字符");
        return;
    }
    if(quertInfo.AddressId==""){
        alert("门店地址必选");
        return;
    }
    if(quertInfo.ShopType==""){
        alert("门店类型必选");
        return;
    }
    quertInfo.Feature=quertInfo.Feature.toString();
    //2.发送网络请求
    axios({
        method:'post',
        url:'/api/Shop/ShopAdd',
        data:quertInfo,
    })
    .then(res=>{
        console.log(res);
       
        if(res.data>0){
            alert("添加成功")
        }
        else{
            alert("添加失败");
        }
    })
    .catch(err=>{
        console.log(err);

    })
}


//图片上传
const img=(e:any)=>{
    //e关键对象
    //1.将上传的文件转成formData格式
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
   //2.发送网络请求完成图片上传
    axios({
        url:'/api/Imgs/UpdateImg',
        method:'post',
        data:f,
    })
    .then(res=>{
        console.log(res);
        quertInfo.Photo=res.data;
        if(res.data=="不是图片"){
            alert("上传的不是图片");
            return;
        }
        if(res.data=="大于2M"){
            alert("上传的图片大于2M");
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })
}


const addrshow=()=>{
    axios({
        method:'get',
        url:'/api/Shop/GetShopAddresses',
        
    })
    .then(res=>{
        console.log(res);
        showaddr.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}




</script>

<style scoped>

</style>